<!DOCTYPE html>
<!--html manifest="space.manifest"-->
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Space Crack</title>
	<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="gfx/space_icon-57.png" />
	<link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="gfx/space_icon-72.png" />
	<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="gfx/space_icon-114.png" />
	<link rel="apple-touch-startup-image" href="splash/space_splash.png" />
	<!--link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" /-->
	<link rel="stylesheet" href="space-game.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<!--script src="/jquery/jquery.mobile-1.1.0.js"></script-->
	<script src="js/assert.js"></script>
	<script src="js/utils.js"></script>
	<script src="js/Touch.js"></script>
	<script src="js/DnD.js"></script>
	<script src="js/LocalStorage.js"></script>

	<script src="js/Viewport.js"></script>
	<script src="js/PlayerManager.js"></script>
	<script src="js/SystemManager.js"></script>
	<script src="js/GameManager.js"></script>
	<script src="js/space-game.js"></script>
<script>

TestViewport.test();
TestSystemManager.test();
TestPlayerManager.test();
TestGameManager.test();

</script>
<style type="text/css">

</style>
</head> 
<body> 
<div id="message">test</div>

<div id="game-board">
<div id="viewport">
<div id="background1" class="background"></div>
<div id="background2" class="background"></div>
<div id="background3" class="background"></div>
<div id="foreground"></div>
</div><!-- viewport -->

<div class="game-button" id="game-menu">Menu</div>
<div class="game-button" id="game-messages">Messages</div>
<div class="game-button" id="game-action">Action</div>
<div class="game-button" id="game-zoomin">+</div>
<div class="game-button" id="game-zoomout">-</div>
<div class="game-button" id="game-end">End</div>

</div><!-- game-board -->

<div class="game-menus">
<div class="game-menu" id="win-menu">
<h1>Victory</h1>
<div class="menu-button" id="win-new">New Game</div>
<div class="menu-button" id="win-stats">Statistics</div>
<div class="menu-button" id="win-resume">Resume Game</div>
</div><!-- win-menu -->

<div class="game-menu" id="loose-menu">
<h1>Defeat</h1>
<div class="menu-button" id="loose-new">New Game</div>
<div class="menu-button" id="loose-stats">Statistics</div>
<div class="menu-button" id="loose-resume">Resume Game</div>
</div><!-- loose-menu -->

<div class="game-menu" id="main-menu">
<h1>Main Menu</h1>
<div class="menu-button" id="main-new">New Game</div>
<div class="menu-button" id="main-stats">Statistics</div>
<div class="menu-button" id="main-resume">Resume Game</div>
</div><!-- main-menu -->

<div class="game-menu" id="messages-menu">
<h1>Messages</h1>
<div class="menu-button" id="messages-lobby">Lobby</div>
<div class="menu-button" id="messages-room">Game Room</div>
<div class="menu-button" id="messages-resume">Resume Game</div>
</div><!-- messages-menu -->
</div><!-- game-menus -->

</body>
</html>
